<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			 *{
			 	margin: 0;
			 	padding: 0;
			 }
			 [v-cloak]{
			 	display: none;
			 }
			 #box{
			 	padding: 50px;
			 }
			 #box1{
				text-align: center;
			 }
			 .box2{
			 	opacity: 1;
			 	margin-left: 0;
			 }
			 .box2-box2-1{
			 	transition: all .8s;
			 }
			 .box2-box2-1-to{
			 	opacity: 0;
			 	margin-left: 500px;
			 }
			 
			 .box2-enter{
			 	opacity: 0;
			 	margin-left: -500px;
			 }
			 .box2-enter-active{
			 	transition: all .8s;
			 }
			 .box2-enter-to{
			 	opacity: 1;
			 }
		</style>
	</head>
	<body>
		<div id="box" v-cloak="">
		     <div id="box1">
		     	<button @click="type=!type">切换</button>
		     	<hr>
		     	<transition name="box2">
		     		<span v-show="type">good</span>
		     	</transition>
		     </div>
		</div>
	</body>
	<script src="vue.js"></script>
	<script>
		  new Vue({
		  	el:"#box",
		  	data:{
		  		type:true
		  	}
		  })
	</script>
</html>
